<template>
  <div class="basic">
    <div class="basic-content">
      <!-- search start -->
      <div class="basic-search">
        <a-form layout="inline">
          <a-form-item label="商品名称:">
            <a-input
              placeholder="请输入"
              v-model="searchData.goodName"
              style="width: 180px"
            />
          </a-form-item>
          <a-form-item label="">
            <a-button
              type="primary"
              @click="getDatas"
              icon="search"
              style="margin-left: 18px"
              >查询</a-button
            >
          </a-form-item>
          <!-- <a-form-item label="下拉字段">
          <a-select placeholder="请选择" default-value="0" style="width: 200px">
            <a-select-option value="0">全部</a-select-option>
            <a-select-option value="1">合格</a-select-option>
            <a-select-option value="2">不合格</a-select-option>
          </a-select>
        </a-form-item> -->
        </a-form>
      </div>
      <!-- search end -->
      <!-- operate start -->
      <div class="table-operator" style="padding: 20px">
        <p style="float: left; font-size: 18px; font-weight: 700; color: #000">
          商品列表
        </p>
        <p style="float: right">
          <a-button icon="plus" style="margin-left: 8px" @click="handleAdd"
            >新增商品</a-button
          >
        </p>
      </div>
      <!-- operate end -->

      <!-- table start -->
      <TableList
        :columns="columns"
        :dataSource="listGoods"
        :pagination="true"
        :tableLoading="loading"
        :total="total"
        size="middle"
        pk="key"
        @queryData="queryData"
        @editClick="editClick"
      />
      <!-- table end -->

      <!-- 彈窗 -->
      <a-modal
        :maskClosable="false"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <template slot="title">
          <div style="display: flex; align-items: center">
            <a-icon type="form" style="font-size: 24px" />
            <div style="margin-left: 8px; font-weight: 700">添加数据</div>
          </div>
        </template>
        <addGood
          v-if="visible"
          ref="addGood"
          :editData="editData"
          :editType="editType"
        />
      </a-modal>
      <!-- form end -->
    </div>
  </div>
</template>

<script>
import TableList from "./Table.vue";
import addGood from "./addGoods.vue";
import {
  addGoods,
  listGoods,
  getInfoById,
  editGoods,
  downGood,
  deleteInfoById,
} from "@/api";
export default {
  components: {
    TableList,
    addGood,
  },
  data() {
    return {
      editData: {}, //编辑当前条数据
      editType: "1", //1新增 2修改
      value: "",
      loading: false,
      visible: false,
      confirmLoading: false,
      total: 1,
      columns: [
        { title: "序号", key: "no", scopedSlots: { customRender: "no" } },
        {
          title: "商品图片",
          key: "imgUrl",
          scopedSlots: { customRender: "pic" },
        },
        { title: "商品名称", dataIndex: "goodName", key: "goodName" },
        { title: "类型", dataIndex: "type", key: "type" }, //type  商品类型 咖啡：coffee
        { title: "规格", dataIndex: "specs", key: "specs" },
        {
          title: "状态",
          key: "status",
          scopedSlots: { customRender: "status" },
        },

        { title: "商品描述", dataIndex: "describeInfo", key: "describeInfo" },
        { title: "商品价格", dataIndex: "price", key: "price" },
        { title: "销量", dataIndex: "isDel", key: "isDel" },
        {
          title: "操作项",
          key: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "150px",
        },
      ],
      listGoods: [],
      searchData: {
        goodName: "", //商品名称
        pageNo: 1, //pageNo,示例值(1)
        pageSize: 10, //pageSize,示例值(10)
      },
    };
  },
  mounted() {
    this.getDatas();
  },
  methods: {
    async editClick(data) {
      console.log(data);
      // 1下架 2修改 3删除
      if (data.index === "1") {
        // console.log("下架");
        // status	商品状态 0 上架 1 下架
        let status = data.row.status === "0" ? "1" : "0";
        downGood({ id: data.row.id, status: status }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            const name = status === "0" ? "上架" : "下架";
            console.log(name, status);
            this.$message.success(`${name}成功`);
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (data.index === "2") {
        console.log("修改");
        this.visible = true;
        this.editType = "2";
        this.editData = data.row;
      } else if (data.index === "3") {
        console.log("删除");
        await deleteInfoById({ id: data.row.id }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    getDatas() {
      listGoods(this.searchData).then((res) => {
        if (res.code === 200) {
          this.listGoods = res.data.records;
          this.total = res.data.total;
          this.listGoods = res.data.records.map((item) => {
            return {
              id: item.id,
              imgUrl: item.imgUrl, //
              goodName: item.goodName,
              type: item.type, //
              specs: item.specs, //
              status: item.status,
              statusName: item.status === "0" ? "上架中" : "下架中", // 0未完成
              price: item.price,
              describeInfo: item.describeInfo,
              isDel: item.isDel,
              specslist: item.specslist,
              sugalist: item.sugalist,
            };
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    queryData(data) {
      this.searchData.pageNo = data.pageNo;
      this.searchData.pageSize = data.pageSize;
      this.getDatas();
    },
    // 弹窗：添加
    handleAdd() {
      this.editType = "1";
      this.visible = true;
    },
    // 弹窗：确认
    handleOk() {
      this.confirmLoading = true;
      console.log(this.$refs.addGood.form.status);
      this.$refs.addGood.form.status
        ? (this.$refs.addGood.form.status = "0")
        : (this.$refs.addGood.form.status = "1");
      console.log(this.$refs.addGood.form.status);
      if (this.editType === "1") {
        addGoods(this.$refs.addGood.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("新增成功");
            this.visible = false;
            this.confirmLoading = false;
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (this.editType === "2") {
        this.$refs.addGood.form.id = this.editData.id;
        editGoods(this.$refs.addGood.form).then((res) => {
          if (res.code === 200) {
            this.$message.success("修改成功");
            this.confirmLoading = false;
            this.visible = false;
            this.getDatas();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
      // this.$refs.addGood.handleSubmit();
    },
    // 弹窗：取消
    handleCancel() {
      this.visible = false;
    },
    // 日期改变事件
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  },
};
</script>

<style lang="less" scoped>
.basic {
  padding: 20px 20px 0 20px;
  .basic-content {
    // margin: 20px;
    // padding-top: 20px;
    background-color: #ffff;
    border-radius: 8px;
  }
  .basic-search {
    background-color: #f5faff;
    padding: 15px;
    border-bottom: 1px solid rgb(230, 230, 230);
    color: rgba(0, 0, 0, 0.65);
    border-radius: 8px;
  }
}
</style>
